<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>垂直居中</title>
<style>
*{padding:0;margin:0;}
#box{
    width:200px;
    height:200px;
    margin:10px auto;
    border:1px solid blue;
    position:relative;
}
#box .content{
    width:100px;
    height:100px;
    background:green;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-50px;
    margin-left:-50px;
}
</style>
</head>
<body>
<div id="box">
    <div style="wdith:100px;height:100px;background: red;"></div>
  <div class="content">内容</div>
</div>
</body>
</html>